
            <div class="row">
                <ul class="chats cool-chat">
                    <li class="in">
                        <img src="{$userInfo['img_url']}" alt="" class="avatar">
                        <div class="message">
                            <span class="arrow"></span>
                            <a class="name" href="javascript:void(0);">Jone Doe</a>
                            <span class="datetime">at Mar 12, 2014 6:12</span>
                            <span class="body">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                            </span>
                        </div>
                    </li>
                    <li class="out">
                        <img src="{$userInfo['img_url']}" alt="" class="avatar">
                        <div class="message">
                            <span class="arrow"></span>
                            <a class="name" href="javascript:void(0);">Margarita Rose</a>
                            <span class="datetime">at Mar 12, 2014 6:13</span>
                            <span class="body">
                                sed diam nonummy nibh euismod tincidunt ut
                            </span>
                        </div>
                    </li>
                </ul>
                <div class="chat-form ">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <input type="text" style="width: 100%" placeholder="Type a message here..." class="form-control">
                        </div>
                        <button class="btn btn-success pull-right" type="submit">Send</button>
                    </form>
                </div>
            </div>
